<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        watch:侦听器
            某个值(data,computed,响应式数据)的change事件   
          语法:
            watch:{
               方法名定义(this.num完整写出来==>去掉this.===>加上引号)
               "num"(newVal,oldVal){
                   newVal:当前值
                   oldVal:修改上一刻的值
               }
            完整写法:
              watch：默认是侦听栈的变化 ,但可以通过配制deep:true（堆与栈改变都侦听到）
                堆与栈
                  基本数据类型(存储在栈中的)：Number,String,Boolean,null,undefined
                  复杂数据类型(存储在堆中的):  Object,Array,Function
                     obj={a:1}    obj.a=2   堆的改变
                                  obj={a:2} 堆与栈都改变了
               "num":{
                  handler(newVal,oldVal){
                   newVal:当前值
                   oldVal:修改上一刻的值
                  },
                  deep:false(默认中侦听栈的变化)  true(堆与栈都侦听),
                  immediate:false  默认(false)只有值改变了再执行方法   true:定义时就立马执行一次方法
               }
            }  
     -->
    <div id="app">
      <h1>{{num}}</h1>
      <h1>计算属性{{num2}}</h1>
      <button @click="num++">修改num</button>
      <button @click="num+=5">修改num</button>
      <button @click="num+=3">修改num</button>
      <button @click="num++">修改num</button>
      <button @click="num+=2">修改num</button>
      <button @click="num++">修改num</button>
      <hr />
      <h1>{{obj.a}}</h1>
      <button @click="obj.a++">修改obj.a</button>
      <button @click="obj={a:Date.now()}">修改obj.a</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          num: 1,
          obj: {
            a: 1
          }
        },
        computed: {
          num2 () {
            return this.num * 2
          }
        },
        watch: {
          //   num (newVal, oldVal) {
          //     console.log(newVal, oldVal)
          //     console.log(this.num)
          //     if (newVal > 10) {
          //       alert('num已大于10')
          //     }
          //   },
          num: {
            handler (newVal, oldVal) {
              if (newVal > 10) {
                alert('num已大于10')
              }
            }
          },
          'obj.a' (newVal, oldVal) {
            // console.log('obj.a', newVal, oldVal)
          },
          num2 (newVal, oldVal) {
            console.log('计算属性的值侦听', newVal, oldVal)
          },
          obj: {
            handler (newVal, oldVal) {
              console.log('obj', newVal, oldVal)
            },
            deep: true,
            immediate: true // 默认(false)只有值改变了再执行方法   true:定义时就立马执行一次方法
          }
        },
        methods: {
          fn () {}
        }
      })
    </script>
  </body>
</html>
